<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并111</title>
		<style>
			div#pa rent{
				width: 300px;
				height: 300px;
				bor der: 1px solid red;
				/* 上框 加外边距 */
				margin-bottom: ;: 40px;
			}
			div#s on{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/* 下框 加外边距 */
				margin-top: 100px;
			}
			/* ---------------【外部】外边距垂直合并问题： 建议：加横向，不要加纵向
												 方案：去掉一个最小值，加内边距
												 
			   -----------------------*/
			   div#parent{
				   width: 300px;
				   height: 300px;
				   /* 边框：内部空间--子元素加外边距*/
				   bor der: 1px solid red;
				   background-color: #aaffff;
				   /* 上外边距  40px*/
				   margin-top: 40px;
				   /* ①添加溢出隐藏或者auto*/
				   over flow: hidden; 
				   /* ②border：1像素透明框*/
				   bor der: 1px solid transparent;
				   padding-top: 1px;
			   }
			   div#son{
				   width: 100px;
				   height: 100px;
				   background-color: #00ff00;
				   /* 上外边距  100px*/
				   margin-top: 100px;
			   }
			   /* --【内部垂直合并：最大值为主】--需要填充
			   解决方法：①找到父元素，添加overflow:hidden[创建块级上下文。阻止外边距合并]
						②找到父元素，添加border或者padding-方向，建议：透明border
			   */
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="son"></div>
		</div>
	</body>
</html>